<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户界面</title>
<style type="text/css">
body, html, #allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}

.center_btn_div {
	position: fixed;
	bottom: 20px;
	background-color: #303030;
	border-radius: 15px;
	padding: 6px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100px;
	left: 50%;
	margin-left: -60px; /*拿width 100px 取中间来定位*/
	text-align: center;
	opacity: 0.8;
}

.center_btn_img {
	width: 30px;
	height: 30px;
	vertical-align: middle;
}
</style>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=B12a3d27a745329b775ec7c97099799d">
	//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
	//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
<!-- jquery -->
<script type="text/javascript" src="./resource/js/jquery-1.11.3.min.js"></script>
<!-- meiyijia -->
<link href="./myj_files/reset.css" rel="stylesheet">
<link href="./myj_files/app.css" rel="stylesheet">
</head>
<body>
	<!-- map -->
	<div id="allmap"></div>
	<!-- /map -->
	<div id="center_btn_div" class="center_btn_div" style="display:none;">
		<img class="center_btn_img" src="./resource/image/i_need_fix.png">
		<a href='javascript:void(0);' onclick="showServiceItem()"
			style="color: white; text-decoration: none">上门服务</a>
	</div>
	<!-- service item -->
	<div id="filter-list" style="display: none">
		<div id="header" class="bg_gray1 box-shadow">
			<header>
				<h1 class="centered">筛选服务</h1>
				<nav>
					<a href="javascript:void(0)" class="chevron-left"
						id="filter-chevron-left" onclick="showMap()"></a>
				</nav>
			</header>
		</div>
		<div id="filter-menu" class="margined">
			<div class="p_8 b_1 b_gray1 bg_white radius">
				<ul>
					<li><a
						href="./liebiao/aiSearch.html"
						><div
								class="simg">
								<img src="./myj_files/5822b8cbd8a9a.png" alt="优惠购机">
							</div>优惠购机</a></li>
					<li><a
						href="javascript:void(0)" onclick="gotoFieOrder()"><div	class="simg">
								<img src="./myj_files/5822b97eca3b3.png" alt="上门维修">
							</div>上门维修</a></li>
				</ul>
				<div class="clear"></div>
			</div>
		</div>
		<div id="filter-result" style="display: none;">
			<ul class="list margin-top" id="ul-filter-result"></ul>
		</div>
	</div>
	<!-- /service item -->
</body>

<script type="text/javascript">


		var bpoint;//存放当前位置
		var map = new BMap.Map("allmap"); // 创建地图实例
		var point = new BMap.Point(113.317, 23.1209); // 创建点坐标
		map.centerAndZoom(point, 14); // 初始化地图，设置中心点坐标和地图级别
		map.enableScrollWheelZoom();

		//获取当前位置
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r) {
			if (this.getStatus() == BMAP_STATUS_SUCCESS) {

				var myIcon = new BMap.Icon("./myj_files/position.png", new BMap.Size(34,30));
				var mk = new BMap.Marker(r.point,{icon:myIcon});
				map.addOverlay(mk);
				bpoint = r.point;
				map.panTo(r.point);
				$("#center_btn_div").show();//定位到才显示按钮
				//alert('您的位置：'+r.point.lng+','+r.point.lat);
				diy_marker();
			} else {
				alert('failed' + this.getStatus());
			}
		}, {
			enableHighAccuracy : true
		});

		//添加定位控件
		var geolocationControl = new BMap.GeolocationControl();
		geolocationControl.addEventListener("locationSuccess", function(e) {
			// 定位成功事件
			var address = '';
			address += e.addressComponent.province;
			address += e.addressComponent.city;
			address += e.addressComponent.district;
			address += e.addressComponent.street;
			address += e.addressComponent.streetNumber;
			alert("当前定位地址为：" + address);
		});
		geolocationControl.addEventListener("locationError", function(e) {
			// 定位失败事件
			alert(e.message);
		});
		map.addControl(geolocationControl);

		//自定义标记
		function diy_marker() {
			var bounds = map.getBounds();
			var sw = bounds.getSouthWest();
			var ne = bounds.getNorthEast();
			var lngSpan = Math.abs(sw.lng - ne.lng);
			var latSpan = Math.abs(ne.lat - sw.lat);
			for (i = 0; i < 11; i++) {
				//自定图标
				var gcs_pt = new BMap.Point(sw.lng + lngSpan
						* (Math.random() * 0.7), ne.lat - latSpan
						* (Math.random() * 0.7));
				var myIcon = new BMap.Icon("./resource/image/1.png",
						new BMap.Size(50, 60));
				var marker2 = new BMap.Marker(gcs_pt, {
					icon : myIcon
				}); // 创建标注
				map.addOverlay(marker2);//添加到地图中
				//获取覆盖物信息
				marker2.addEventListener("click", getAddress);
			}
		}

		function getAddress(e) {//获取工程师位置
			var geoc = new BMap.Geocoder();//地址解析
			var pt = e.target.point;
			geoc.getLocation(pt, function(rs) {
				var addComp = rs.addressComponents;
				alert(addComp.province + ", " + addComp.city + ", "
						+ addComp.district + ", " + addComp.street + ", "
						+ addComp.streetNumber);
			});
		}

		function showServiceItem(){//显示服务列表
			$("#center_btn_div").hide();
			$("#allmap").hide();
			$("#filter-list").show();
		}
		function showMap(){//显示地图
			$("#center_btn_div").show();
			$("#allmap").show();
			$("#filter-list").hide();
		}

		function gotoFieOrder(){//跳往维修页面
			var geoc = new BMap.Geocoder();//地址解析
			geoc.getLocation(bpoint, function(rss) {
				var addComp = rss.addressComponents;
				var address = addComp.province + ", " + addComp.city + ", "
						+ addComp.district + ", " + addComp.street + ", "
						+ addComp.streetNumber;
				var url = './liebiao/biaodan.html?address='+address;
				window.location=encodeURI(url);
			});

		}

	</script>

</html>